<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>欢迎您光临Cynthia的个人空间</title>
    <link rel="shortcut icon" href="images/bitbug_favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/cssreset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<!--     <link rel="stylesheet" href="css/swiper-3.3.1.min.css"> -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/myjs.js"></script>
<script src="js/jQuery-face-cursor.js"></script>
<!-- <script src="js/swiper-3.3.1.min.js"></script> -->
</head>
<body>
<!-- 左侧导航 -->
    <ol class="gps">
        <li class="current">
          <div class="n1"></div>
          <div class="n2">
            <span></span>
          </div>
          <div class="n3">
            <span>MY HOME</span>
          </div>
        </li>
        <li>
          <div class="n1"></div>
          <div class="n2">
            <span></span>
          </div>
          <div class="n3">
            <span>MY WORKS</span>
          </div>
        </li>
        <li>
          <div class="n1"></div>
          <div class="n2">
            <span></span>
          </div>
          <div class="n3">
            <span>SKILLS</span>
          </div>
        </li>
        <li>
          <div class="n1"></div>
          <div class="n2">
            <span></span>
          </div>
          <div class="n3">
            <span>CONTECT</span>
          </div>
        </li>
        <li class="music">
         <audio src="images/closer.mp3" autoplay loop></audio>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </li>
    </ol>
    <figure>
          <audio src="images/a1.mp3"></audio>
          <audio src="images/a2.mp3"></audio>
          <audio src="images/a3.mp3"></audio>
          <audio src="images/a4.mp3"></audio>
    </figure>
<!-- 顶部导航 -->
    <nav>
        <h1 class="nav_left">
            <img src="images/logo.png" alt="">
        </h1>
        <ul class="nav_right">
          <li class="current">
             <p>HOME</p>
             <span></span>
          </li>
          <li>
              <p>WORKS</p>
              <span></span>
          </li>
          <li>
              <p>SKILLS</p>
              <span></span>
          </li>
          <li>
              <p>CONTECT</p>
              <span></span>
          </li>
       </ul>
    </nav>
    <div class="wen_box"></div>
   <section class="main">
   <!-- 我的首页 -->
        <div class="screen1 out">
          <div class="cover"></div>
          <div class="dream"></div>
          <div class="dreamer">
            <img src="images/screen1_p.png" alt="">
          </div>
        </div>
   <!--  我的作品-->
        <div class="screen2 out">
          <!-- <figure>
            <video src="images/video.mp4" autoplay loop></video>
          </figure> -->
          <ul class="flys">
            <li class="fly1"></li>
            <li class="fly2"></li>
            <li class="fly3"></li>
            <li class="fly4"></li>
            <li class="fly5"></li>
            <li class="fly6"></li>
            <li class="fly7"></li>
            <li class="fly8"></li>
            <li class="fly9"></li>
            <li class="fly10"></li>
            <li class="fly11"></li>
            <li class="fly12"></li>
          </ul>
          <div class="font">
            <p>WORKS</p>
            <p>越努力，越幸运</p>
            <span class="left"></span>
            <span class="right"></span>
          </div>
          <ul class="title">
            <li>WEB</li>
            <li>ICON</li>
            <li>APP</li>
            <li>THEME</li>
          </ul>
          <div class="con">
            <div class="con1 animated rollIn">
              <ul>
                <li>
                  <a href="javascript:;"></a>
                  <p>
                     <img src="images/logo1.png" alt="">
                  </p>
                </li>
                <li>
                  <a href="javascript:;"></a>
                  <p>
                     <img src="images/logo2.png" alt="">
                  </p>
                </li>
                <li>
                  <a href="javascript:;"></a>
                  <p>
                     <img src="images/logo3.png" alt="">
                  </p>
                </li>
                <li>
                  <a href="javascript:;"></a>
                  <p>
                     <img src="images/logo4.png" alt="">
                  </p>
                </li>
                <li>
                  <a href="javascript:;"></a>
                  <p>
                     <img src="images/logo5.png" alt="">
                  </p>
                </li>
                <li>
                  <a href="javascript:;"></a>
                  <p>
                     一品红药业
                  </p>
                </li>
              </ul>
            </div>
            <div class="con2 animated rollIn">
               <div class="icon">
                 <ul>
                   <li><img src="images/icon1.png" alt=""></li>
                   <li><img src="images/icon2.png" alt=""></li>
                   <li><img src="images/icon3.png" alt=""></li>
                   <li><img src="images/icon4.png" alt=""></li>
                   <li><img src="images/icon5.png" alt=""></li>
                   <li><img src="images/icon6.png" alt=""></li>
                   <li><img src="images/icon1.png" alt=""></li>
                 </ul>
               </div>
            </div>
            <div class="con3 animated rollIn">
               <div class="app">
                   <img src="images/1.png" alt="">
                   <div class="img">
                     <img src="images/app1.png" alt="">
                   </div>
               </div>
               <div class="apps">
                 <ul>
                   <li><img src="images/app0.png" alt=""></li>
                   <li class="current"><img src="images/app1.png" alt=""></li>
                   <li><img src="images/app2.png" alt=""></li>
                   <li><img src="images/app3.png" alt=""></li>
                   <li><img src="images/app4.png" alt=""></li>
                   <li><img src="images/app5.png" alt=""></li>
                 </ul>
                 <span class="left"></span>
                 <span class="right"></span>
               </div>
            </div>
            <div class="con4 animated rollIn">
               <div class="theme">
                 <img src="images/theme.png" alt="">
                 <div class="up"></div>
                 <div class="down"></div>
               </div>
               <ul class="detail animated1 flipInX">
                 <li><a href="images/theme1.png"></a></li>
                 <li><a href="images/theme2.png"></a></li>
                 <li><a href="images/theme3.png"></a></li>
                 <li><a href="images/theme4.png"></a></li>
                 <li><a href="images/theme5.png"></a></li>
                 <li><a href="images/theme6.png"></a></li>
               </ul>
               <div class="big_img"><img src="images/theme1.png" alt=""/></div>
            </div>
          </div>
        </div>
   <!--  我的技能 -->
        <div class="screen3 out">
          <div class="font">
            <p>SKILLS</p>
            <p>唯有不断地学习，才能使我的梦<br>不会如泡泡般易碎</p>
            <span class="left"></span>
            <span class="right"></span>
          </div>
          <div class="skills">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
          </div>
        </div>
   <!-- 请联系我 -->
        <div class="screen4 out">
          <div class="lines">
             <span class="line1"></span>
             <span class="line2"></span>
             <span class="line3"></span>
             <span class="line4"></span>
          </div>
          <div class="contain">
             <ul class="cube">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
               <li></li>
             </ul>
             <div class="p_right">
               <p class="p1">
                 <strong>姓名</strong>：王倩<br/>
                 <strong>自我描述：</strong>要做就要做得更好的“讨厌鬼”<br/>
                 <strong>择司标准：</strong>期待我加入您的前端开发团队<br/>
                 <strong>求职意向：</strong>前端开发
               </p>
               <p class="p2">
                 <strong>您的来电,是我们成功第一步</strong>
               </p>
             </div>
          </div>
          <ul class="contact">
            <li>
               <span></span>
               <span></span>
               <span></span>
               <span></span>
               <img src="images/qq.png" alt="">
               <p>562136975</p>
            </li>
            <li>
               <span></span>
               <span></span>
               <span></span>
               <span></span>
               <img src="images/wx.png" alt="" class="wx">
               <p>wq910409</p>
               <img src="images/wxp.jpg" alt="" class="wxp" width="120" height="120">
            </li>
            <li>
               <span></span>
               <span></span>
               <span></span>
               <span></span>
               <img src="images/tphone.png" alt="">
               <p>138 2478 2493</p>
            </li>
            <li>
               <span></span>
               <span></span>
               <span></span>
               <span></span>
               <img src="images/em.png" alt="">
               <p>562136975@qq.com</p>
            </li>
            </ul>
        </div>
   </section>
</body>
</html>
